<template>
<div class="qualityassurance">

  <div class="qualityassurance-top">
    <h2>质量确认函</h2>

    <div class="head">
      <div class="btns clearfix">
        <el-button class="bind" v-show="!hasBind2" type="primary" :disabled="!editable" @click="bindOrder">绑定订单</el-button>

        <!-- <el-button v-if="hasBind2" class="export" type="primary" :disabled="!editable">导出</el-button> -->
        <!-- <el-button v-else class="export" type="primary" :disabled="true">导出</el-button> -->
      </div>

      <div class="select-orders ">
        <el-row :gutter="20">
          <el-col :span="10">
            <div>
              <p class="select-orders-line">
                选中的外贸订单
                <el-button v-show="hasBind2 ? editable : false"  @click="bindOrder" type="text">点击修改</el-button></p>
              </p>
              <ul>
                <!-- <li v-if="showftc"><a :href="'#/initiatingprocess/businessform?dTab=3&formInstId='+ showftc.id + '&formServiceName=' +  showftc.formServiceName">{{data.tq_bindFContracts[0]}}</a></li> -->
                <li><a href="#">{{data.tq_bindFContracts[0]}}</a></li>
              </ul>
            </div>
          </el-col>
          <el-col :span="10" :offset="4">
            <div>
              <p class="select-orders-line">选中的内贸订单</p>
              <ul>

                <!-- <li v-for="item in data.tq_bindDContracts">
                <a href="#">{{item}}</a>
                </li> -->

                <li>
                  <a href="#">{{data.tq_bindDContracts[0]}}</a>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>

    <div class="qualityassurance-contract">

      <div class="head-title">
        <p><span>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD </span></p>
        <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
        <p> TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
        <p>http://www.ftl-fintech.com/ info@huibaigroup.com</p>
        <h2>Quality Confirmation Letter</h2>
      </div>

      <div class="head-1">
        <div class="clearfix">
          <div class="head-1-right">
            <el-form label-width="180px">
              <el-form-item label="Contract NO:">
                <el-input :readonly="hasBind2 ? !editable : true" v-model="data.tq_contractno"></el-input>
              </el-form-item>

              <el-form-item label="Date:">
                <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="hasBind2 ? !editable : true" @change="mustUpdate2" v-model="tq_date"></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>




      <div class="head-3">
        <el-form label-width="120px">
          <el-form-item label="The Buyer:">
            <el-input :readonly="hasBind2 ? !editable : true" v-model="data.tq_buyer"></el-input>
          </el-form-item>

          <el-form-item label="ADD:">
            <el-input :readonly="hasBind2 ? !editable : true" v-model="data.tq_address"></el-input>
          </el-form-item>

          <el-form-item label="Tel:">
            <el-input :readonly="hasBind2 ? !editable : true" v-model="data.tq_tel"></el-input>
          </el-form-item>
        </el-form>

        <div>
<p><span>The Seller：</span> TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
<p><span>Add:</span>	NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
<p><span>Tel: </span>	 010-50911288</p>

<p>The Seller and the Buyer both confirm that the following products have met the quality requirements of the Buyer,
and the packages are with good quality. There is no brand and patent infringement and other illegal acts.
</p>
<p>
买卖双方特此确认买方购买的下列产品均符合买方质量要求，且包装完好，不涉及品牌及专利侵权等违法行为。
</p>
</div>

      </div>

      <div class="table">
        <el-table :data="tableData" border style="width: 100%" :span-method="spanMethod">
          <el-table-column label="序号">
            <el-table-column type="index" label="NO" :index="indexMethod"></el-table-column>
          </el-table-column>

          <el-table-column label="产品" min-width="100">
            <el-table-column prop="tq_table1_products" label="DESCRIPTION OF GOODS">
              <template slot-scope="scope">
                <span  class="cell-edit-input">
                  <el-input :readonly="hasBind2 ? !editable : true" v-model="scope.row.tq_table1_products" ></el-input>
                </span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="规格型号" min-width="100">
            <el-table-column prop="tq_table1_description" label="SPECIFICATION MODEL">
              <template slot-scope="scope">
                <span  class="cell-edit-input">
                  <el-input :readonly="hasBind2 ? !editable : true" v-model="scope.row.tq_table1_description" ></el-input>
                </span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="数量" min-width="100">
            <el-table-column prop="tq_table1_quantity" label="QUANTITY(PCS)">
              <template slot-scope="scope">
                <span  class="cell-edit-input">
                  <el-input-number  :min="0" :disabled="hasBind2 ? !editable : true" @change="handleTableNumberChange" v-model="scope.row.tq_table1_quantity" :controls="false"></el-input-number>
                </span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column v-if="hasBind2 ? editable : false" label="操作" width="100">
            <template slot-scope="scope">
            <el-button @click="addNewLine(scope.$index, data.tq_table1)" type="text" size="small">添加</el-button>
            <el-button @click="removeCurrentLine(scope.$index, data.tq_table1)" type="text" size="small">移除</el-button>
          </template>
          </el-table-column>

        </el-table>
      </div>

      <div class="sign">

        <el-row>
          <el-col :span="10">Buyer (signature and seal )</el-col>
          <el-col :span="10" :offset="4">Seller (signature and seal ) </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">Date:	</el-col>
          <el-col :span="10" :offset="4">Date:</el-col>
        </el-row>
      </div>
    </div>




    <div class="upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="hasBind2 ? editable : false"  name="file" multiple @change="selectFiles">
          <el-button v-if="hasBind2" :disabled="!editable" type="primary">选择附件</el-button>
          <el-button v-else :disabled="true" type="primary">选择附件</el-button>
        </div>

        <ul class="upload-files">
          <li @mouseover="handleOver(item)" :key="index"   @mouseout="handleOut(item)" v-for="(item,index) in data.attachedFiles">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>

    <div class="bind-window">
      <el-dialog title="订单绑定" width="70%" :visible.sync="dialogCtrl.outerVisible">

        <el-form :inline="true">
          <el-form-item label="订单编号">
            <el-input v-model="orderNumber" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="外贸合同号">
            <el-input v-model="foreignTradeContractNumber" placeholder="请输入外贸合同号"></el-input>
          </el-form-item>

          <el-form-item label="买家名称">
            <el-input v-model="buyerName" placeholder="请输入买家名称"></el-input>
          </el-form-item>


          <el-form-item>
            <el-date-picker
            v-model="orangeDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOrange">
          </el-date-picker>
        </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="queryFtc(-1)">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="table1Data" style="width: 100%" border>
          <el-table-column prop="table1_orderNumber" label="订单编号" sortable width="240" :sort-method="table1Sort">
            <template slot-scope="scope">
            <span>
              <input type="checkbox" :value="scope.row.table1_id" @click="checkBoxRadio('selForder', $event)" v-model="tq_selectOrder">
              <span>{{scope.row.table1_orderNumber}}</span>
            </span>
          </template>
          </el-table-column>

          <el-table-column prop="table1_ftcNumber" label="外贸合同号" sortable>
          </el-table-column>

          <el-table-column prop="table1_buyerName" label="买家名称" >
          </el-table-column>

          <el-table-column prop="table1_createTime" label="订单生成时间" sortable>
          </el-table-column>

          <el-table-column prop="table1_orderProcess" label="订单流程" >
          </el-table-column>

          <el-table-column prop="table1_orderStatus" label="订单状态" >
          </el-table-column>
        </el-table>

        <div class="pageing">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currPage"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalSize">
        </el-pagination>

        </div>


        <el-dialog width="50%" title="内贸合同绑定" :visible.sync="dialogCtrl.innerVisible" append-to-body>

          <el-table v-loading="loading" :data="table2Data" style="width: 100%" border>
            <el-table-column prop="table2_dtcNumber" label="内贸合同编号" width="200">
              <template slot-scope="scope">
              <span>
                <input type="checkbox" @click="checkBoxRadio('selDorder', $event)" :value="scope.row.table2_id"  v-model="tq_selectOrder2">
                <span>{{scope.row.table2_dtcNumber}}</span>
              </span>
            </template>
            </el-table-column>

            <el-table-column prop="table2_sellerName" label="供方名称">
            </el-table-column>

            <el-table-column prop="table2_contractAmount" label="合同金额">
            </el-table-column>
          </el-table>

          <div slot="footer" class="dialog-footer">
            <el-button type="primary" :disabled="canNotSelect2" @click="bindInnerConfirm">确定</el-button>
            <el-button @click="bindInnerCancel">取 消</el-button>
          </div>
        </el-dialog>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :disabled="canNotSelect" @click="bindOuterSelect">选择内贸合同</el-button>
          <el-button @click="bindOuterCancel">取 消</el-button>
        </div>

      </el-dialog>
    </div>

  </div>

</div>
</template>

<script>
import {
  uploadFiles,
  queryBindContracts,
  queryBindDtcContracts,
  queryFtcContract,
  queryFtcContractTable
} from '@/server/initiatingprocess';

import {filedownload , deleteFile} from '@/server/customermanagement/index.js'

export default {
  created() {
    this.tq_date = this.data.tq_date;

    let _this = this;
    this.bus.$on('has-bind', function(){
      _this.hasBind2 = true;
      _this.$forceUpdate();
    });
  },
  mounted() {

    //刷新浏览器时，避免重叠
    document.querySelector('.initiatingprocess  .routers-ctrl').style.zIndex = '-1';

    this.tq_date = this.data.tq_date;

    let that = this;
    let closeDom = document.querySelectorAll('.bind-window i.el-dialog__close.el-icon-close');
    for (let i = 0; i < closeDom.length; i++) {
      closeDom[i].onclick = function() {
        that.bindInnerCancel();
      };
    }
  },
  updated() {
    this.updateTable();
  },
  methods: {
    indexMethod(value) {
      let lines = this.data.tq_table1.length;
      if (lines - 1 === value) return '合计Total';
      return value + 1;
    },

    mustUpdate() {
      this.$forceUpdate();
    },
    mustUpdate2() {
      this.data.tp_date = this.tq_date;
      this.$forceUpdate();
    },

    addNewLine(currentIndex, table) {
      let newLine = _.cloneDeep(table[0]);

      for (let prop in newLine) {
        newLine[prop] = '';
      }

      table.splice(currentIndex + 1, 0, newLine);
      this.handleTableNumberChange();
    },
    removeCurrentLine(currentIndex, table) {
      if (table.length > 2) {
        table.splice(currentIndex, 1);
        this.handleTableNumberChange();
      }
    },
    handleTableNumberChange() {
      this.updateTable();
      this.$forceUpdate();
    },
    updateTable() {
      let current = this.data.tq_table1,
        quantitys = 0;
      let lines = current.length;

      for (let i = 0; i < lines - 1; i++) {
        current[i].tq_table1_quantity = parseInt(current[i].tq_table1_quantity);
        quantitys += parseInt(current[i].tq_table1_quantity);
      }

      current[lines - 1].tq_table1_quantity = quantitys;
    },
    spanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      let lines = this.data.tq_table1.length;
      if (lines - 1 === rowIndex) {
        switch (columnIndex) {
          case 0:
            return [1, 3];
            break;
          case 1:
          case 2:
          case 4:
            return [0, 0];
          case 3:
            return [1, 2];
        }
      }
    },
    specialInitialProcess() {
      let dom = document.querySelector('.initiatingprocess .routers-ctrl');
      if (dom) {
        dom.style.zIndex = '0';
      }
    },
    bindOrder() {
      this.dialogCtrl.outerVisible = true;
      this.tq_bindFContracts = [];
      this.tq_bindDContracts = [];
      this.canNotSelect = true;
      this.canNotSelect2 = true;


      this.orderNumber = '';
      this.foreignTradeContractNumber = '';
      this.buyerName = '';
      this.queryFtc(1,30);
    },

    handleSizeChange(size){
      this.page.pageSize = size;
      //需要重新查询
      this.queryFtc(1, this.page.pageSize);
    },
    handleCurrentChange(currPage){
      this.page.currPage = currPage;
      //需要重新查询
      this.queryFtc(this.page.currPage, this.page.pageSize);
    },
    queryFtc(currPage, pageSize) {
      //通过查询来获得外贸合同订单，并修改table1的数据来进行显示

      let startTime, endTime;
      if (currPage ==  -1){
        currPage = 1;
        this.page.currPage = 1;
        pageSize = this.page.pageSize;
      }

      this.loading = true;
      this.table1Data = [];
      this.table2Data = [];

      this.tq_selectOrder = [];

      if (this.orangeDate) {
        startTime = new Date('' + this.orangeDate[0]).getTime();
        endTime = new Date('' + this.orangeDate[1]).getTime();
        queryBindContracts({
          flowId: 1,
          orderCode: this.orderNumber,
          ftcCode: this.foreignTradeContractNumber,
          buyerName: this.buyerName,
          currPage: currPage - 1,
          pageSize: pageSize,
          gt_createTime: startTime,
          lt_createTime: endTime
        }).then((response) => {

          this.loading = false;
          this.page.totalSize = response.data.totalSize;
          this.queryOrderData = response.data.datas;

          let table1Data = this.table1Data;
          for (let i = 0; i < this.queryOrderData.length; i++) {

            if (!table1Data[i]) {
              table1Data[i] = {};
            }
            table1Data[i].table1_orderNumber = this.queryOrderData[i].orderCode;
            table1Data[i].table1_ftcNumber = this.queryOrderData[i].ftcCode;
            table1Data[i].table1_buyerName = this.queryOrderData[i].buyerName;
            table1Data[i].table1_id = this.queryOrderData[i].id;


            let date = new Date(this.queryOrderData[i].createTime);
            let m = date.getMonth() + 1;
            m = m < 10 ? '0' + m  : m;
            let d = date.getDate();
            d = d < 10 ? '0' + d  : d;

            table1Data[i].table1_createTime = date.getFullYear() + '-' + m + '-' + d;

            switch(this.queryOrderData[i].formInstStatus){
              case 0:
              case 1:
              table1Data[i].table1_orderStatus = '流转中';
              break;
              case 2:
              table1Data[i].table1_orderStatus = '完结';
              break;
            }

            table1Data[i].table1_orderProcess = this.queryOrderData[i].flowName;
          }

          this.$forceUpdate();

        });
      } else {
        queryBindContracts({
          flowId: 1,
          orderCode: this.orderNumber,
          ftcCode: this.foreignTradeContractNumber,
          buyerName: this.buyerName,
          currPage: currPage - 1,
          pageSize: pageSize
        }).then((response) => {

          this.loading = false;
          this.page.totalSize = response.data.totalSize;
          this.queryOrderData = response.data.datas;

          let table1Data = this.table1Data;
          for (let i = 0; i < this.queryOrderData.length; i++) {

            if (!table1Data[i]) {
              table1Data[i] = {};
            }
            table1Data[i].table1_orderNumber = this.queryOrderData[i].orderCode;
            table1Data[i].table1_ftcNumber = this.queryOrderData[i].ftcCode;
            table1Data[i].table1_buyerName = this.queryOrderData[i].buyerName;
            table1Data[i].table1_id = this.queryOrderData[i].id;


            let date = new Date(this.queryOrderData[i].createTime);
            let m = date.getMonth() + 1;
            m = m < 10 ? '0' + m  : m;
            let d = date.getDate();
            d = d < 10 ? '0' + d  : d;

            table1Data[i].table1_createTime = date.getFullYear() + '-' + m + '-' + d;

            switch(this.queryOrderData[i].formInstStatus){
              case 0:
              case 1:
              table1Data[i].table1_orderStatus = '流转中';
              break;
              case 2:
              table1Data[i].table1_orderStatus = '完结';
              break;
            }

            table1Data[i].table1_orderProcess = this.queryOrderData[i].flowName;
          }

          this.$forceUpdate();

        });
      }


    },
    table1Sort(a, b) {
      let a1 = a.toString().slice(a.length - 5);
      let b1 = b.toString().slice(b.length - 5);
      return parseInt(b) - parseInt(b);
    },
    checkBoxRadio(type, event) {
      let value = event.target.value;

      if (type === 'selForder') {

        if (value === this.tq_selectOrder[0]) {
          this.canNotSelect = true;
        } else {
          this.canNotSelect = false;
        }

        this.tq_selectOrder = [value];

        this.showftc = this.queryOrderData.find((e) => {
          return e.id == this.tq_selectOrder[0]
        });

        this.tq_bindFContracts[0] = this.showftc.ftcCode;

      } else if (type === 'selDorder') {
        if (value === this.tq_selectOrder2[0]) {
          this.canNotSelect2 = true;
        } else {
          this.canNotSelect2 = false;
        }

        this.tq_selectOrder2 = [value];

        let currDtc = this.queryOrderData2.find((e) => {
          return e.id == this.tq_selectOrder2[0]
        });
        this.tq_bindDContracts[0] = currDtc.bd_no;
      }
    },
    bindOuterSelect() {
      let that = this;
      this.dialogCtrl.innerVisible = true;

      let closeDom = document.querySelectorAll('i.el-dialog__close.el-icon-close');
      for (let i = 0; i < closeDom.length; i++) {
        closeDom[i].onclick = function() {
          that.bindInnerCancel();
        };
      }

      /*
      需要根据当前选中的订单值即 checkedFOrder,来修改 table2Data，用于显示该订单下的内贸订单
      */


      this.tq_bindDContracts = []

      // this.showftc = this.queryOrderData.find((e) => {
      //   return e.ftcCode == this.tq_bindFContracts[0]
      // });

      this.data.orderCode = this.showftc.orderCode;
      this.data.buyerName = this.showftc.buyerName;

      //绑定的外贸订单 的id
      this.data.bindingFormInstId = this.showftc.id;

      this.loading = true;
      queryBindDtcContracts({
        formInstId: this.showftc.id
      }).then((response) => {

        this.loading = false;
        this.queryOrderData2 = response.data.datas;

        let table2Data = this.table2Data;

        for (let i = 0; i < this.queryOrderData2.length; i++) {

          if (!table2Data[i]) {
            table2Data[i] = {};
          }
          table2Data[i].table2_dtcNumber = this.queryOrderData2[i].bd_no;
          table2Data[i].table2_sellerName = this.queryOrderData2[i].bd_seller;
          table2Data[i].table2_contractAmount = this.queryOrderData2[i].bd_table1_totalAmount;
          table2Data[i].table2_id = this.queryOrderData2[i].id;
        }
        this.$forceUpdate();
      });
    },
    bindOuterCancel() {
      this.bindInnerCancel();
    },
    bindInnerConfirm() {
      this.dialogCtrl.outerVisible = false;
      this.dialogCtrl.innerVisible = false;

      if (this.tq_bindDContracts.length === 0) {
        this.bindInnerCancel();
        return;
      }

      this.data.tq_bindFContracts = _.cloneDeep(this.tq_bindFContracts);
      this.data.tq_bindDContracts = _.cloneDeep(this.tq_bindDContracts);
      this.hasBind2 = true;
      this.bus.$emit('bind-new-ftc', true);

      /*
       */

      //勾选的内贸
      // this.showdtcs = this.queryOrderData2.filter((e)=>{
      //    return this.data.tq_bindDContracts.indexOf(e.bd_no) != -1;
      // });

      this.showdtcs[0] = this.queryOrderData2.find((e) => {
        return this.data.tq_bindDContracts[0] == e.bd_no;
      });

      //选中的内贸
      this.data.selDtc = this.showdtcs[0];

      //选择外贸之后，更新tab2
      this.$parent.$parent.$children[2].$children[0].clickTimes = 1;
      this.$parent.$parent.$children[2].$children[0].$forceUpdate();

      //更新表格的数据，找到绑定的外贸合同的数据
      queryFtcContract({
        formInstId: this.showftc.id,
      }).then((response) => {
        let ftcData = response.data.datas[0];

        this.data.tq_contractno = ftcData.bf_orderNumber;
        this.data.tq_date = ftcData.bf_orderDate;
        this.data.tq_buyer = ftcData.bf_buy_name;
        this.data.tq_address = ftcData.bf_buy_address;
        this.data.tq_tel = ftcData.bf_buy_tel;

        this.$forceUpdate();


        queryFtcContractTable({
          formInstId: this.showftc.id,
          ftcId: ''
        }).then((response) => {
          let ftcTable = response.data.datas,
            currentTable = this.data.tq_table1;

          if (ftcTable != null) {
            for (let i = 0; i < ftcTable.length - 1; i++) {
              if (!currentTable[i]) {
                currentTable.push({});
              }

              currentTable[i].tq_table1_products = ftcTable[i].bf_table1_product;
              currentTable[i].tq_table1_description = ftcTable[i].bf_table1_description;
              currentTable[i].tq_table1_quantity = ftcTable[i].bf_table1_quantity;
            }
          }

          currentTable.splice(ftcTable.length - 1);

          this.table1Data = [];
          this.table2Data = [];
          this.page.pageSize = 30;
          this.$forceUpdate();
        });

      });
    },
    bindInnerCancel() {
      this.dialogCtrl.outerVisible = false;
      this.dialogCtrl.innerVisible = false;

      this.tq_bindFContracts = [];
      this.tq_bindDContracts = [];

      this.table1Data = [];
      this.table2Data = [];

      this.tq_selectOrder = [];
      this.page.pageSize = 30;

      this.canNotSelect = true;
      this.canNotSelect2 = true;
      this.$forceUpdate();
    },
    selectFiles(event) {
      //票据附件
      let _this = this;


      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr) => {
        resArr.forEach(function(res, i) {
          _this.data.attachedFiles.push({
            name: event.target.files[i].name,
            status: 1,
            id: res.data.datas[0].id
          });
        });

        _this.$forceUpdate();
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.data.attachedFiles.splice(index, 1);
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },
  },
  computed: {
    tableData() {

      let current = this.data.tq_table1,
        quantitys = 0;
      let lines = current.length;

      for (let i = 0; i < lines - 1; i++) {
        quantitys += current[i].tq_table1_quantity;
      }

      current[lines - 1].tq_table1_quantity = quantitys;
      return current;
    }
  },
  data() {
    return {
      dialogCtrl: {
        outerVisible: false,
        innerVisible: false,
      },
      page: {
        currPage: 1,
        pageSize: 30,
        totalSize: 0
      },
      hasBind2: false,
      loading: false,
      tq_date: '',
      tq_bindFContracts: [], //控制绑定订单时的外贸合同单选显示
      tq_bindDContracts: [],
      tq_selectOrder: [],
      tq_selectOrder2: [],
      canNotSelect: true,
      canNotSelect2: true,
      orderNumber: '',
      foreignTradeContractNumber: '',
      buyerName: '',
      queryOrderData: [],
      queryOrderData2: [],
      showftc: null,
      showdtcs: [],
      table1Data: [],
      table2Data: [],
      orangeDate: '',
      pickerOrange:{
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
    }
  },
  props: {
    formId: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    },
    bus: {
      type: Object,
      required: true
    }
  },
  components: {}
}
</script>

<style lang="scss">
body {
    .dialog-footer {
        text-align: center;
        button {
            margin-right: 50px;
        }
    }
}

.qualityassurance {
    // padding: 20px;

    font-size: 15px;
    line-height: 30px;

    p {
      padding: 5px 0;

      span {
        font-weight: bolder;
      }
    }

    .qualityassurance-top {
        border: 1px solid #999;

        > h2 {
            text-align: center;
            padding: 20px;
        }

        a {
            color: #409EFF;
        }

        .qualityassurance-contract {

            .head-title {
                text-align: center;
                > h2 {
                    padding: 20px;
                }
            }

            .sign {
              padding: 0px 20px;
            }

            .head {
                h2 {
                    text-align: center;
                }

                .head-ctrl {
                    height: 60px;
                    .order-number {
                        padding: 16px 0;
                        float: left;
                    }
                    button {
                        float: right;
                    }
                }
            }

            .head-1 {
                .head-1-right {
                    float: right;
                    margin-right: 20px;
                }
            }

            .head-3 {
                padding: 20px;
                .el-select {
                    width: 100%;
                }

                .el-form-item__label {
                    text-align: left;
                    width: 120px;
                }
            }

            .table {
                padding: 20px;
                td {
                    border: 1px solid #e6ebf5;
                }
                th {
                    text-align: center;
                }

                .el-table thead.is-group th {
                    background: #e6e6e6;
                }

                .cell-edit-input {
                    .el-input__inner {
                        border: none;
                        background: transparent;
                        padding: 0;
                        text-align: center;
                    }

                    .el-input-number__decrease,
                    .el-input-number__increase {
                        width: 20px;

                        border: none;
                        background: transparent;
                    }

                    .el-input-number {
                        width: 100%;
                        min-width: 100px;
                    }
                }

            }

        }

        .head {
            padding: 0px 20px;
            position: relative;

            .btns {
              position:  absolute;
              top: -52px;

                .bind {
                    float: left;
                }
                .export {
                    float: right;
                }
            }

            .select-orders {

                li {
                    padding: 5px 0;
                }
                .select-orders-line {
                  height: 40px;
                  line-height: 40px;
                }
            }

        }

        .bind-window {
            .el-form--inline .el-form-item {
                margin-right: 15px;
            }

            td {
                border: 1px solid #e6ebf5;
            }

            td:not(.el-table_1_column_1) {
                width: 120px;
                min-width: 120px;
            }

            .dialog-footer {
                text-align: center;
                button {
                    margin-right: 80px;
                }
            }

            a {
                color: #409EFF;
            }

        }

        .upload {
            padding: 20px;
            > div {
                border: 1px solid #999;
                padding: 20px 0 40px 20px;
            }

            .upload-btn {
                position: relative;
                > input {
                    opacity: 0;
                    width: 100px;
                    height: 40px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
            .upload-files {

                > li {
                    width: 300px;
                    padding: 10px 0;
                    transition: all 0.5s linear;

                    &:hover {

                      >span {
                        color: #409EFF;
                      }
                    }
                  }

                font-size: 16px;
                span {
                    padding: 0 10px;
                    cursor: pointer;
                    display: inline;
                }
                span.el-icon-close:hover {
                    cursor: pointer;
                }
            }
            .upload-hint {
                font-size: 20px;
                margin-bottom: 10px;
            }
        }
    }

}
</style>
